<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>修改生日信息</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		::placeholder {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}
		/*改写*/

		.edit_info {
			padding: 0 0.75rem;
		}

		input {
			text-align: right
		}

		.edit_info {
			background: rgba(255, 255, 255, 1);
		}

		.edit_info>div {
			height: 2.75rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.75rem;
			font-family: PingFangSC-font-size: 0.75rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		.edit_info>div img {
			width: 1rem;
			height: 1rem;
			padding: 0;
			transform: translateX(0.22rem);
		}

		.btn_save {
			width: 17.25rem;
			height: 2rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1.23rem;
			margin: 2rem auto;
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 2rem;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- <div style="padding: .75rem .75rem;">
				<div style="color: #666666;height:1.8rem;line-height: 0.9rem;font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
					亲爱的朋友们，我们将在生日前1周、2天、当天发送短信提醒您哦~
				</div>

			</div> -->
		<div class="edit_info">
			<div>
				<span>姓名</span>
				<div>
					<input v-model="realname" type="text" placeholder="请输入姓名" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);" />
				</div>
			</div>
			<div tapmode @click="sel_date">
				<span>生日</span>
				<div style="display:flex;align-items:center;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
					<span style="display:inline-block:margin-right:0.25rem;transform: translateX(0.22rem);">{{birthday}}</span>
					<img src="../../image/btn/btn-right.png"  />
				</div>
			</div>
		</div>
		<div class="btn_save" @click="next()">
			保存
		</div>

		<!-- 准备新增加生日提醒 -->
		<!-- <div class="ming-bg-white" style="padding:0 .75rem;">
				<ul class="aui-list aui-list-noborder">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								姓名
							</div>
							<div class="aui-list-item-title" style="font-size: 0.75rem;padding-right:.5rem;">
								<input v-model="realname" type="text" placeholder="请输入姓名" style="color:#666666;"/>
							</div>
						</div>
					</li>
					<li class="aui-list-item" tapmode @click="sel_date">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								生日
							</div>
							<div class="aui-list-item-title">
								<span v-if="birthday!==''" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);display:ininline-block;margin-right:-.3rem;">
									{{birthday}}
								</span>
								<span v-else style="font-size:15px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);display:inline-block;margin-right:-.3rem;">请选择</span>
								<img src="../../image/btn/btn-right.png" style="margin-right:.3rem;"/>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="aui-btn-block" :class="{'active':realname!=='' && birthday!==''}" @click=“next”>
				保存
			</div> -->
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			realname: '',
			callname: '',
			birthday: '',
		},
		methods: {
			sel_date: function() {
				api.openPicker({
					type: 'date',
					title: '选择日期'
				}, function(ret, err) {
					if (ret) {
						var str = ret.year + '.' + ret.month + '.' + ret.day;
						vm.birthday = str;
					} else {
						console.log(JSON.stringify(err));
					}
				});
			}
		}
	})
	apiready = function() {
		// vm.get_userinfo()
		if ($api.getStorage('birthday_info')) {
			vm.id = $api.getStorage('birthday_info').id
			vm.realname = $api.getStorage('birthday_info').realname
			vm.callname = $api.getStorage('birthday_info').callname
			vm.birthday = $api.getStorage('birthday_info').birthday
			$api.rmStorage('birthday_info')
		}
	}

	function next() {
		if (vm.id == 0) {
			get_data('/api/User/addUserFamily', {
				token: $api.getStorage('token'),
				realname: vm.realname,
				// callname:vm.callname,
				birthday: vm.birthday
			}, function(ret) {
				toast(ret.msg)
				if (ret.status) {
					send_event('birthday_ref')
					delay_close(300)
				}
			})
		} else {
			get_data('/api/User/editUserFamily', {
				id: vm.id,
				token: $api.getStorage('token'),
				realname: vm.realname,
				// callname:vm.callname,
				birthday: vm.birthday
			}, function(ret) {
				toast(ret.msg)
				if (ret.status) {
					send_event('birthday_ref')
					delay_close(300)
				}
			})
		}
	}
</script>

</html>
